<template>
    <l-layout class="l-tab-page" :left="320" >
        <template #left>
            <l-panel style="padding-right:0;" >
                <div class="l-from-body" style="padding-left:20px;" > 
                    <el-form :model="formData" :rules="rules" size="mini"  ref="form" >
                        <el-col :span="24">
                            <el-form-item :label="$t('被委托人')" prop="f_ToUserId">
                                <l-user-select 
                                    v-model="formData.f_ToUserId"
                                    >
                                </l-user-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item :label="$t('被委类型')" prop="f_Type">
                                <l-radio
                                    :options="deloptions"
                                    v-model="formData.f_Type"
                                    >
                              </l-radio>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item :label="$t('开始时间')" prop="f_BeginDate">
                                <l-date v-model="formData.f_BeginDate"></l-date>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item :label="$t('结束时间')" prop="f_EndDate">
                                <l-date v-model="formData.f_EndDate"></l-date>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item :label="$t('委托说明')" prop="f_Description">
                                <el-input type="textarea" v-model="formData.f_Description"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </div>
            </l-panel>
        </template>
        <l-panel style="padding-left:0;">
            <l-select-panel
                v-model="formData.f_scheme"
                ref="selectPanel"
                valueKey="f_Code"
                :columns="columns"
                :loadSelectTable="loadSelectTable"
            >
            </l-select-panel>
        </l-panel>
    </l-layout>
</template>
<script>
const api = window.$api.workflow.scheme
export default {
    components: {
    },
    data(){
        return {
            formData:{
                f_ToUserId:'',
                f_BeginDate:'',
                f_EndDate:'',
                f_Description:'',
                f_Type:0,
                f_scheme:''
            },
             rules: {
                f_ToUserId: [
                    { required: true, message: this.$t('please select被委托人'),trigger: 'blur' }
                ],
                f_BeginDate: [
                    { required: true, message: this.$t('please select开始时间'),trigger: 'blur' }
                ],
                f_EndDate: [
                    { required: true, message: this.$t('please select结束时间'),trigger: 'blur' }
                ],
                f_Type: [
                    { required: true, message: this.$t('please select委托类型'),trigger: 'blur' }
                ]
            },
            columns: [
                {label:this.$t('编号'),prop:'f_Code',minWidth:'150'},
                {label:this.$t('名称'),prop:'f_Name',minWidth:'150'},
                {label:this.$t('分类'),prop:'f_Category',width:'100',align:'center'}
            ],
             deloptions:[{label:this.$t('审核委托'),value:0},
                        {label:this.$t('发起委托'),value:1}],
        };
    },
    computed:{
        
    },
    created(){
    },
    methods:{
        loadSelectTable(postData){
            return new Promise((resolve,reject) => {
                postData.sidx = 'F_CreateDate DESC'
                api.getPage(postData).then(res=>{
                    const data = this.$deepClone(res.data.data)
                    resolve(data)
                }).catch(err=>{
                    reject(err)
                })
            })
        },
        // 表单方法
        openedForm(){
            this.$refs.selectPanel.init()
        },
        resetForm(){
            this.$refs.form && this.$refs.form.resetFields();
            this.$refs.selectPanel.reset();
        },
        // 校验表单
        validateForm(){
            if(this.lr_dateFormat(this.formData.f_BeginDate)>this.lr_dateFormat(this.formData.f_EndDate)){
                this.$message({
                    type: 'warning',
                    message: this.$t(`开始时间需要小于结束时间！`)
                })     
                return false
            }
            return new Promise((resolve) => {
                this.$refs.form.validate((valid) => {
                    resolve(valid)
                })
            })
        },
        setForm({entity,list}){
            this.formData = entity
            this.$set(this.formData, 'f_scheme', String(list))

            this.$refs.selectPanel.init()
        },
        async getForm(){
            const postData = {
                entity:this.$deepClone(this.formData),
                list:this.formData.f_scheme.split(',')
            }
            postData.entity.f_scheme = ''
            postData.entity.f_ToUserName = await this.lr_userName(this.formData.f_ToUserId)
            return postData
        }
    }
}
</script>